export default {
  chartSize(val) {
    let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (!clientWidth) return;
    let percent = clientWidth / 1920;
    return val * percent;
  },
  getCookie(key) {
    let cookieString = document.cookie;
    let arr = cookieString.split(';');
    let obj = {};
    for (let i = 0; i < arr.length; i++) {
      let a = arr[i].split('=');
      obj[a[0].trim()] = a[1];
    }
    try {
      return JSON.parse(obj[key])
    } catch (e) {
      return obj[key] || ''
    }
  },
  // 中间背景雨
  rainBg(ele) {
    var that = this;
    var c = document.querySelector(ele);
    var ctx = c.getContext("2d");//获取canvas上下文
    var w = c.width = c.parentNode.clientWidth;
    var h = c.height = c.parentNode.clientHeight;
    //设置canvas宽、高

    function random(min, max) {
      return Math.random() * (max - min) + min;
    }

    function RainDrop() { }
    //雨滴对象 这是绘制雨滴动画的关键
    RainDrop.prototype = {
      init: function () {
        this.x = random(0, w);//雨滴的位置x
        this.y = h;//雨滴的位置y
        this.color = 'hsl(180, 100%, 50%)';//雨滴颜色 长方形的填充色
        this.vy = random(4, 5);//雨滴下落速度
        this.hit = 0;//下落的最大值
        this.size = 1.4;//长方形宽度
      },
      draw: function () {
        if (this.y > this.hit) {
          var linearGradient = ctx.createLinearGradient(this.x, this.y, this.x, this.y + this.size * 30)
          linearGradient.addColorStop(0, '#2079B8')
          linearGradient.addColorStop(1, '#0C1155')
          ctx.fillStyle = linearGradient
          ctx.fillRect(this.x, this.y, this.size, this.size * 50);//绘制长方形，通过多次叠加长方形，形成雨滴下落效果
        }
        this.update();//更新位置
      },
      update: function () {
        if (this.y > this.hit) {
          this.y -= this.vy;//未达到底部，增加雨滴y坐标
        } else {
          this.init();
        }
      }
    };

    function resize() {
      w = c.width = window.innerWidth;
      h = c.height = window.innerHeight;
    }

    //初始化一个雨滴

    var rs = []
    for (var i = 0; i < 10; i++) {
      setTimeout(function () {
        var r = new RainDrop();
        r.init();
        rs.push(r);
      }, i * 300)
    }

    function anim() {
      ctx.clearRect(0, 0, w, h);//填充背景色，注意不要用clearRect，否则会清空前面的雨滴，导致不能产生叠加的效果
      for (var i = 0; i < rs.length; i++) {
        rs[i].draw();//绘制雨滴
      }
      requestAnimationFrame(anim);//控制动画帧
    }

    window.addEventListener("resize", resize);
    //启动动画
    anim()

  },
  pieChart(id, series, legend) {
    var option = {
      legend: Object.assign({
        orient: 'vertical',
        left: 0,
        top: 'center',
        itemWidth: 12,
        itemHeight: 10,
        icon: "roundRect",
        textStyle: {
          padding: [0, 0, 0, 0],
          lineHeight: 12,
          color: "#DDF2FF",
          fontSize: this.chartSize(11),
        }
      }, legend),
      tooltip: {
        trigger: 'item',
        backgroundColor: "rgba(0,0,0, 0.3)",
        borderColor: "transparent",
        textStyle: {
          fontSize: this.chartSize(11),
          color: "#DDF2FF",
        },
      },
      series: series,
    };
    let chartDom = document.getElementById(id)
    if (chartDom.hasAttribute("_echarts_instance_")) {
      chartDom.removeAttribute("_echarts_instance_");
    }
    var myChart = echarts.init(document.getElementById(id))
    myChart.setOption(option)
  },
  lineChart(id, dataX, series) {
    var option = {
      color: ["#FA5D58", "#FDD214", "#9B73F0", "#149BED", "#48D0E0"],
      grid: {
        left: this.chartSize(10),
        right: this.chartSize(10),
        bottom: this.chartSize(10),
        top: this.chartSize(30),
        containLabel: true,
      },
      legend: {
        orient: 'horizontal',
        left: 'center',
        icon: "roundRect",
        itemHeight: this.chartSize(3),
        itemWidth: this.chartSize(14),
        textStyle: {
          color: "#DDF2FF",
          fontSize: this.chartSize(11),
        }
      },
      tooltip: {
        backgroundColor: "rgba(0,0,0, 0.3)",
        borderColor: "transparent",
        textStyle: {
          fontSize: this.chartSize(12),
          color: "#DDF2FF",
        },
        axisPointer: {
          lineStyle: {
            color: "#1C8FEA",
          }
        },
        trigger: 'axis',
      },
      xAxis: [
        {
          type: "category",
          data: dataX,
          axisLine: {
            lineStyle: {
              color: "#012F65",
            },
          },
          axisLabel: {
            margin: 10,
            color: "#00C2F6",
            textStyle: {
              fontSize: this.chartSize(12),
            },
            formatter: function (value, index) {
              var label = value;
              if (label.length > 10) {
                label = label.substring(0, 10) + ".."
              }
              return label;
            },
          },
          axisTick: {
            //刻度
            show: false,
          },
        },
      ],
      yAxis: [
        {
          axisLabel: {
            padding: [2, 0, 0, 0],
            formatter: "{value}",
            color: "#00C2F6",
            textStyle: {
              fontSize: this.chartSize(12),
            },
          },
          axisTick: {
            show: true,
          },
          axisLine: {
            lineStyle: {
              color: "none",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#012F65",
            },
          },
        },
      ],
      series: series,
    };
    let chartDom = document.getElementById(id)
    if (chartDom.hasAttribute("_echarts_instance_")) {
      chartDom.removeAttribute("_echarts_instance_");
    }
    var myChart = echarts.init(document.getElementById(id))
    myChart.setOption(option)
  },
  blockChart(id, dataX, series) {
    var option = {
      // color: ["#FA5D58", "#FDD214", "#9B73F0", "#149BED", "#48D0E0"],
      grid: {
        left: this.chartSize(10),
        right: this.chartSize(10),
        bottom: this.chartSize(10),
        top: this.chartSize(30),
        containLabel: true,
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: "rgba(0,0,0, 0.3)",
        borderColor: "transparent",
        textStyle: {
          fontSize: this.chartSize(11),
          color: "#DDF2FF",
        },
      },
      xAxis: [
        {
          type: "category",
          data: dataX,
          axisLine: {
            lineStyle: {
              color: "#012F65",
            },
          },
          axisLabel: {
            margin: 10,
            color: "#00C2F6",
            textStyle: {
              fontSize: this.chartSize(12),
            },
            formatter: function (value, index) {
              var label = value;
              if (label.length > 5) {
                label = label.substring(0, 5) + ".."
              }
              return label;
            },
          },
          axisTick: {
            //刻度
            show: false,
          },
        },
      ],
      yAxis: [
        {
          axisLabel: {
            padding: [2, 0, 0, 0],
            formatter: "{value}",
            color: "#00C2F6",
            textStyle: {
              fontSize: this.chartSize(12),
            },
          },
          axisTick: {
            show: true,
          },
          axisLine: {
            lineStyle: {
              color: "none",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#012F65",
            },
          },
        },
      ],
      series: series,
    };
    let chartDom = document.getElementById(id)
    if (chartDom.hasAttribute("_echarts_instance_")) {
      chartDom.removeAttribute("_echarts_instance_");
    }
    var myChart = echarts.init(document.getElementById(id))
    myChart.setOption(option)
  },
  hBlockChart(id, dataX, series) {
    var option = {
      // color: ["#FA5D58", "#FDD214", "#9B73F0", "#149BED", "#48D0E0"],
      grid: {
        left: this.chartSize(10),
        right: this.chartSize(10),
        bottom: this.chartSize(10),
        top: this.chartSize(10),
        containLabel: true,
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: "rgba(0,0,0, 0.3)",
        borderColor: "transparent",
        textStyle: {
          fontSize: this.chartSize(11),
          color: "#DDF2FF",
        },
      },
      yAxis: [
        {
          type: "category",
          data: dataX,
          axisLine: {
            lineStyle: {
              color: "#012F65",
            },
          },
          axisLabel: {
            margin: 10,
            color: "#DDF2FF",
            textStyle: {
              fontSize: this.chartSize(12),
            },
            formatter: function (value, index) {
              var label = value;
              if (label.length > 5) {
                label = label.substring(0, 5) + ".."
              }
              return label;
            },
          },
          axisTick: {
            //刻度
            show: false,
          },
          // splitLine: {
          //   show: true,
          //   lineStyle: {
          //     color: "#012F65",
          //   },
          // },
        },
      ],
      xAxis: [
        {
          type: "value",
          splitNumber: this.chartSize(10),
          axisLabel: {
            padding: [2, 0, 0, 0],
            formatter: "{value}",
            color: "#00C2F6",
            textStyle: {
              fontSize: this.chartSize(12),
            },
          },
          axisTick: {
            show: true,
          },
          axisLine: {
            lineStyle: {
              color: "none",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#012F65",
            },
          },
        },
      ],
      series: series,
    };
    let chartDom = document.getElementById(id)
    if (chartDom.hasAttribute("_echarts_instance_")) {
      chartDom.removeAttribute("_echarts_instance_");
    }
    var myChart = echarts.init(document.getElementById(id))
    myChart.setOption(option)
  },
  layerBlockChart(id, dataX, series) {
    var option = {
      backgroundColor: "",
      tooltip: {
        backgroundColor: "rgba(0,0,0, 0.3)",
        borderColor: "transparent",
        textStyle: {
          fontSize: this.chartSize(12),
          color: "#DDF2FF",
        },
        axisPointer: {
          lineStyle: {
            color: "#1C8FEA",
          }
        },
        trigger: "axis",
      },
      grid: {
        left: this.chartSize(10),
        right: this.chartSize(10),
        bottom: this.chartSize(10),
        top: this.chartSize(10),
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: dataX,
          axisLine: {
            lineStyle: {
              color: "#012F65",
            },
          },
          axisLabel: {
            margin: 10,
            color: "#00C2F6",
            textStyle: {
              fontSize: this.chartSize(12),
            },
            formatter: function (value, index) {
              var label = value;
              if (label.length > 5) {
                label = label.substring(0, 5) + ".."
              }
              return label;
            },
          },
          axisTick: {
            //刻度
            show: false,
          },
        },
      ],
      yAxis: [
        {
          axisLabel: {
            padding: [2, 0, 0, 0],
            formatter: "{value}",
            color: "#00C2F6",
            textStyle: {
              fontSize: this.chartSize(12),
            },
          },
          axisTick: {
            show: true,
          },
          axisLine: {
            lineStyle: {
              color: "none",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#012F65",
            },
          },
        },
      ],
      //   dataZoom: [
      //     //滚动条
      //     {
      //       show: true,
      //       type: "slider",
      //       realtime: true,
      //       startValue: 0,
      //       endValue: 10,
      //       xAxisIndex: [0],
      //       bottom: "10",
      //       left: "30",
      //       height: 10,
      //       borderColor: "rgba(0,0,0,0)",
      //       textStyle: {
      //         color: "#05D5FF",
      //       },
      //     },
      //   ],
      series: [
        {
          type: "bar",
          data: series[0].data,
          name: series[0].name,
          barWidth: this.chartSize(12),
          zlevel: 1,
          itemStyle: {
            // borderRadius: [10, 10, 0, 0],
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(91,205,243, 1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(2,116,232, 1)", // 100% 处的颜色
                },
              ],
              false
            ),
            shadowBlur: 0,
          }
        },
        {
          name: series[1].name,
          type: "bar",
          barWidth: this.chartSize(12),
          barGap: "-100%",
          margin: "20",
          data: series[1].data,
          textStyle: {
            fontSize: this.chartSize(12),
            color: "#DDF2FF"
          },
          itemStyle: {
            color: "#05325F",
            fontSize: this.chartSize(12),
            barBorderRadius: 2
          }
        },
      ],
    };
    let chartDom = document.getElementById(id)
    if (chartDom.hasAttribute("_echarts_instance_")) {
      chartDom.removeAttribute("_echarts_instance_");
    }
    var myChart = echarts.init(document.getElementById(id))
    myChart.setOption(option)
  },
  polycyclicChart(id, title, chartData, sum) {
    title = ((title + "" == "NaN%" || title + "" == "Infinity%") ? "0%" : title + "");
    let pieSeries = [];
    chartData.forEach((v, i) => {
      var data = [{
        value: v.value,
        name: v.name,
        itemStyle: {
          color: v.color,
        },
      },
      {
        value: sum - v.value,
        name: '',
        itemStyle: {
          color: "rgba(14,22,110,1)"
        },
        tooltip: {
          show: false,
          formatter: "",
        },
      }]
      if (sum == 0) {
        data = [data[data.length - 1]]
      }
      pieSeries.push({
        name: '',
        type: 'pie',
        clockWise: false,
        hoverAnimation: false,
        radius: [80 - i * 25 + '%', 66 - i * 25 + '%'],
        center: ["50%", "50%"],
        label: {
          show: false
        },
        data: data,
      });
      pieSeries.push({
        name: '',
        type: 'pie',
        silent: false,
        z: 1,
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: [80 - i * 25 + '%', 66 - i * 25 + '%'],
        center: ["50%", "50%"],
        label: {
          show: false
        },
        data: [{
          value: 10,
          itemStyle: {
            color: v.color,
            opacity: 0.2,
          },
          tooltip: {
            show: false,
            formatter: "",
          },
        }]
      });
      v.percent = (v.value / sum * 100).toFixed(1) + "%";
    })
    var option = {
      title: {
        left: 'center',
        top: 'middle',
        text: title,
        textStyle: {
          color: "#52F1F7",
          fontSize: this.chartSize(14),
          fontFamily: "Microsoft YaHei",
        },
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: "rgba(0,0,0, 0.3)",
        borderColor: "transparent",
        textStyle: {
          fontSize: this.chartSize(12),
          color: "#DDF2FF",
        },
      },
      backgroundColor: '',
      grid: {
        containLabel: false
      },
      xAxis: [{
        show: false
      }],
      series: pieSeries
    };
    let chartDom = document.getElementById(id)
    if (chartDom.hasAttribute("_echarts_instance_")) {
      chartDom.removeAttribute("_echarts_instance_");
    }
    var myChart = echarts.init(document.getElementById(id))
    myChart.setOption(option)
  },
  hdBlockChart(id, data = []) {
    function contains(arr, dst) {
      var i = arr.length;
      while ((i -= 1)) {
        if (arr[i] == dst) {
          return i;
        }
      }
      return false;
    }
    var attackSourcesColor = [
      new echarts.graphic.LinearGradient(0, 1, 1, 1, [
        { offset: 0, color: "#EB3B5A" },
        { offset: 1, color: "#FE9C5A" }
      ]),
      new echarts.graphic.LinearGradient(0, 1, 1, 1, [
        { offset: 0, color: "#FA8231" },
        { offset: 1, color: "#FFD14C" }
      ]),
      new echarts.graphic.LinearGradient(0, 1, 1, 1, [
        { offset: 0, color: "#F7B731" },
        { offset: 1, color: "#FFEE96" }
      ]),
      new echarts.graphic.LinearGradient(0, 1, 1, 1, [
        { offset: 0, color: "#02DDFE" },
        { offset: 1, color: "#006EEB" }
      ])
    ];
    var attackSourcesColor1 = ["#FA5D58", "#FDD214", "#9B73F0", "#149BED", "#48D0E0"];
    var attaData = [];
    var attaName = [];
    var topName = [];
    var salvProMax = [];
    var max = 0;
    data.forEach((it, index) => {
      attaData[index] = it.value;
      attaName[index] = it.name;
      topName[index] = `${it.name}`;
      if (it.taskCount > max) {
        max = it.taskCount
      }
    });
    for (let i = 0; i < attaData.length; i++) {
      salvProMax.push(max);
    }
    function attackSourcesDataFmt(sData) {
      var sss = [];
      sData.forEach(function (item, i) {
        let itemStyle = {
          // color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i]
          color: attackSourcesColor[3],
        };
        sss.push({
          value: item,
          itemStyle: itemStyle
        });
      });
      return sss;
    }

    var option = {
      backgroundColor: "",
      tooltip: {
        show: false,
        backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
        textStyle: {
          fontSize: this.chartSize(14),
        }
      },
      color: ["#F7B731"],
      legend: {
        show: false,
      },
      grid: {
        left: 0,
        right: this.chartSize(10),
        bottom: this.chartSize(10),
        top: this.chartSize(10),
        containLabel: true
      },
      xAxis: {
        type: "value",
        splitNumber: this.chartSize(10),
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        }
      },
      yAxis: [
        {                                      //左侧排行数字
          type: "category",
          inverse: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisPointer: {
            label: {
              show: true,
            }
          },
          pdaaing: [5, 0, 0, 0],
          postion: "right",
          data: attaName,
          axisLabel: {
            margin: this.chartSize(30),
            fontSize: this.chartSize(12),
            align: "left",
            padding: [2, 0, 0, 0],
            color: "#000",
            rich: {
              nt1: {
                color: "#DDF2FF",
                backgroundColor: attackSourcesColor1[0],
                width: this.chartSize(15),
                height: this.chartSize(15),
                fontSize: this.chartSize(12),
                align: "center",
                borderRadius: 100,
              },
              nt2: {
                color: "#DDF2FF",
                backgroundColor: attackSourcesColor1[1],
                width: this.chartSize(15),
                height: this.chartSize(15),
                fontSize: this.chartSize(12),
                align: "center",
                borderRadius: 100,
              },
              nt3: {
                color: "#DDF2FF",
                backgroundColor: attackSourcesColor1[2],
                width: this.chartSize(15),
                height: this.chartSize(15),
                fontSize: this.chartSize(12),
                align: "center",
                borderRadius: 100,
              },
              nt: {
                color: "#DDF2FF",
                backgroundColor: attackSourcesColor1[3],
                width: this.chartSize(15),
                height: this.chartSize(15),
                fontSize: this.chartSize(12),
                align: "center",
                borderRadius: 100,
              }
            },
            formatter: function (value, index) {
              index = contains(attaName, value) + 1;
              if (index - 1 < 3) {
                return ["{nt" + index + "|" + index + "}"].join("\n");
              } else {
                return ["{nt|" + index + "}"].join("\n");
              }
            }
          }
        },
        {                                       //右侧名字
          type: "category",
          inverse: true,
          axisTick: "none",
          axisLine: "none",
          show: true,
          axisLabel: {
            textStyle: {
              color: "#DDF2FF",
              fontSize: this.chartSize(12),
            },
            formatter: '{value}',
          },
          //data: attackSourcesDataFmt(attaName) 
          data: attackSourcesDataFmt(attaData)  //数字
        },
        {                                   //名称
          type: 'category',
          offset: this.chartSize(30),
          position: "left",
          axisLabel: {
            color: `#DDF2FF`,
            fontSize: this.chartSize(10),
          },
          axisLine: {
            show: false
          },
          inverse: true,
          axisTick: {
            show: false
          },
          axisLabel: {
            padding: [2, 0, 0, 0],
            // interval: 0,
            color: ["#DDF2FF"],
            align: "right",
            lineHeight: 12,
            fontSize: this.chartSize(12),
          },
          data: topName
        },
      ],
      series: [
        {
          zlevel: 1,
          name: "",
          type: "bar",
          barWidth: this.chartSize(12),
          animationDuration: 1500,
          data: attackSourcesDataFmt(attaData),
          align: "center",
          itemStyle: {
            normal: {
              barBorderRadius: 2
            }
          },
          label: {
            show: false,
            fontSize: this.chartSize(13),
            color: "#DDF2FF",
            textBorderWidth: 2,
            padding: [2, 0, 0, 0]
          }
        },
        {
          name: "",
          type: "bar",
          barWidth: this.chartSize(12),
          barGap: "-100%",
          margin: this.chartSize(20),
          data: salvProMax,
          textStyle: {
            fontSize: this.chartSize(12),
            color: "#DDF2FF"
          },
          itemStyle: {
            color: "#161A55",
            fontSize: this.chartSize(12),
            barBorderRadius: 2
          }
        }
      ]
    };
    let chartDom = document.getElementById(id)
    if (chartDom.hasAttribute("_echarts_instance_")) {
      chartDom.removeAttribute("_echarts_instance_");
    }
    var myChart = echarts.init(document.getElementById(id))
    myChart.setOption(option)
  },
}
